<template>
  <div class="home-main">
    <div class="header-bar">
      <router-link :to="{name: 'city'}">城市</router-link>
    </div>
    <div class="wrapper" ref="wrapper">
      <div class="content">
        <div class="banner">
          <!-- ref 给组建起名字 方便在vue中找到组建 -->
          <swiper class="swiper" :options="swiperOption" ref="mySwiper">
            <!-- slides -->
            <swiper-slide class="banner-slide" v-for="m in bannerList" :key="m.id">
              <img class="banner-img" :src="m.url" alt />
            </swiper-slide>
          </swiper>
          <!-- Optional controls -->
          <div class="swiper-pagination" slot="pagination"></div>
        </div>
        <div class="box" @click="foo"></div>
        <div class="box" v-for="n in nums" :key="n">n</div>
      </div>
    </div>
  </div>
</template>

<script>
// require styles
import "swiper/dist/css/swiper.css";

import { swiper, swiperSlide } from "vue-awesome-swiper";
import BScroll from "@better-scroll/core";
export default {
  name: "Home",
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 1.2,
        spaceBetween: 0,
        centeredSlides: true,
        pagination: {
          el: ".swiper-pagination"
        }
      },
      // 目前练习的是vue移动端 数据都是本地模拟的 实际开发 数据应该从后台通过api获取
      bannerList: [
        {
          id: Math.random(),
          url: require("../../assets/imgs/home/banner1.jpg")
        },
        {
          id: Math.random(),
          url: require("../../assets/imgs/home/banner2.jpg")
        },
        {
          id: Math.random(),
          url: require("../../assets/imgs/home/banner3.jpg")
        }
      ],
      nums: []
    };
  },
  computed: {},
  created() {
    this.initNums();
  },
  mounted() {
    this.$nextTick(() => {
      //创建(初始化)一个bScroll实力对象
      this.scroll = new BScroll(this.$refs.wrapper, {
        click: true
      });
    });
  },
  methods: {
    foo() {
      console.log("abc");
    },
    initNums() {
      // 5s之后生成10genum
      setTimeout(() => {
        for (var i = 0; i < 10; i++) {
          this.nums.push(i);
        }
        // a.通知bs重新计算
        // b.vue双向响应的 数据对象更新并不能实现马上更新dom
        this.$nextTick(() => {
          this.scroll.refresh();
        });
      }, 5000);
    }
  }
};
</script>

<style scoped lang="scss">
.home-main {
  height: 100%;
  .header-bar {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 44px;
    background-color: pink;
    z-index: 999;
  }
  .wrapper {
    width: 100%;
    height: 100%;
    margin-top: 44px;
    .content {
      padding-bottom: 150px;
    }
    .banner {
      width: 100%;
      height: 156px;
      .swiper {
        width: 100%;
        height: 145px;
        // 使每一个slide默认先缩小为.8倍 如果激活样式 还原1倍大小
        .swiper-slide {
          transition: 300ms;
          transform: scale(0.9);
        }
        .swiper-slide-active,
        .swiper-slide-duplicate-active {
          transform: scale(1);
        }
        .banner-slide {
          height: 100%;
          .banner-img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .swiper-pagination {
        width: 100%;
        height: 4px;
        margin-top: 5px;
        // 从父组件 修改子组件内容
        ::v-deep .swiper-pagination-bullet {
          width: 4px;
          height: 4px;
          border-radius: 2px;
          background-color: #fff;
          margin: 0 4px;
          transition: all ease 0.4s;
          &.swiper-pagination-bullet-active {
            width: 14px;
            height: 3px;
          }
        }
      }
    }

    .box {
      width: 100%;
      height: 50px;
      background: green;
      margin: 20px 0;
    }
  }
}
</style>
